<template>
  <el-tabs v-model="activeName" type="border-card" class="home-container">
    <el-tab-pane id="btn-main" class="head-btn" label="我的主页" name="first">
      <!-- 顶部卡片 -->
      <el-row :gutter="12">
        <el-col :span="4">
          <el-card shadow="hover">
            <span>待付款</span>
            <div class="todaydata">
              {{ todaydata.pendPay == 0 ? "一" : todaydata.pendPay }}
            </div>
          </el-card>
        </el-col>
        <el-col :span="4">
          <el-card shadow="hover">
            <span>待发货</span>
            <div class="todaydata">
              {{ todaydata.payed == 0 ? "一" : todaydata.payed }}
            </div>
          </el-card>
        </el-col>
        <el-col :span="4">
          <el-card shadow="hover">
            <span>配送中 </span>
            <div class="todaydata">
              {{ todaydata.inDelivery == 0 ? "一" : todaydata.inDelivery }}
            </div>
          </el-card>
        </el-col>
        <el-col :span="4">
          <el-card shadow="hover">
            <span>已取消</span>
            <div class="todaydata">
              {{ todaydata.canceled == 0 ? "一" : todaydata.canceled }}
            </div>
          </el-card>
        </el-col>
        <el-col :span="4">
          <el-card shadow="hover">
            <span>已完成</span>
            <div class="todaydata">
              {{ todaydata.finished == 0 ? "一" : todaydata.finished }}
            </div>
          </el-card>
        </el-col>
        <el-col :span="4">
          <el-card shadow="hover">
            <span>支付金额</span>
            <div class="todaydata">
              {{ todaydata.payAmount == 0 ? "一" : todaydata.payAmount }}
            </div>
          </el-card>
        </el-col>
      </el-row>
      <!-- /顶部卡片 -->
      <el-row :gutter="12" class="left-data">
        <!-- 主页左侧图 -->
        <el-col :span="14">
          <el-card shadow="always">
            <span>订单数据(当日各时段)</span>
            <div ref="leftChart" style="width: 100%; height: 410px"></div>
          </el-card>
        </el-col>
        <!-- /主页左侧图 -->
        <!-- 主页右侧图 -->
        <el-col :span="10">
          <el-row>
            <el-card>
              <el-col :span="24">
                <span>常用功能</span>
                <!-- 四个常用功能 -->
                <el-row :gutter="12" class="commonly-used">
                  <el-col :span="6">
                    <el-button class="commonly-used1" type="" icon="el-icon-plus" @click="addgoods"></el-button>
                    <!-- <i class="el-icon-plus"></i> -->
                    <span>添加商品</span>
                  </el-col>
                  <el-col :span="6">
                    <el-button class="commonly-used2" type="" icon="el-icon-document" @click="ordermanage"></el-button>
                    <span>订单管理</span>
                  </el-col>
                  <el-col :span="6">
                    <el-button class="commonly-used3" type="" icon="el-icon-shopping-cart-2"
                      @click="activemanage"></el-button>
                    <span>活动管理</span>
                  </el-col>
                  <el-col :span="6">
                    <el-button class="commonly-used4" type="" icon="el-icon-menu"></el-button>
                    <span>全部功能</span>
                  </el-col>
                </el-row>
                <!-- 四个常用功能 -->
              </el-col>
            </el-card>
          </el-row>
          <el-row class="right-bottom">
            <el-card>
              <el-col :span="24">
                <span>店铺数据</span>
                <div ref="rightlineChart" style="width: 100%; height: 266px"></div>
              </el-col>
            </el-card>
          </el-row>
        </el-col>
        <!-- /主页右侧图 -->
      </el-row>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import { orderData, todayData, shopData } from "@/api/allstatas";
// import goodsmanagement from "../goods/components/goodsmanagement.vue";
import store from "@/store";
export default {
  name: "",
  components: {},
  data() {
    return {
      activeName: "first",
      // 左侧图表数据
      leftdata: "",
      // 顶部当日数据
      todaydata: "",
      // 右侧折线图数据
      rightlinedata: "",
      showDialogVisible: true,
    };
  },
  mounted() {
    this.getEchartData();
    this.getLineChart();
  },
  computed: {},
  // created() {
  //   // 预先调用一个方法
  //   this.todayData();
  // },
  methods: {
    // 创建柱状图
    getEchartData() {
      // 获取请求到的数据
      let left_data = this.orderData();
      // console.log(left_data);
      left_data.then((res) => {
        this.leftdata = res.orders;
        const chart = this.$refs.leftChart;
        const myChart = this.$echarts.init(chart);
        // 绘制图表
        const option = {
          xAxis: {
            type: "category",
            axisLabel: { interval: 0 },
            data: [
              "06",
              "07",
              "08",
              "09",
              "10",
              "11",
              "12",
              "13",
              "14",
              "15",
              "16",
              "17",
              "18",
              "19",
              "20",
              "21",
              "22",
              "23",
              "24",
            ],
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              data: this.leftdata,
              type: "bar",
            },
          ],
          tooltip: {
            formatter: function (params) {
              // do some thing
              return (
                params.name +
                "<br><div style='display: inline-block;border-radius:50%;background:#5470C6; width:14px;height:14px;margin:0 10px 0 0'></div>" +
                "订单数  " +
                params.data
              );
            },
            // backgroundColor: "rgba(32, 33, 36,.7)",
            // borderColor: "rgba(32, 33, 36,0.20)",
            // borderWidth: 1,
            // textStyle: {
            //   // 文字提示样式
            //   color: "#fff",
            //   fontSize: "12",
            // },
          },
        };
        myChart.setOption(option);
        // 是图标根据页面大小进行缩放
        window.addEventListener("resize", () => {
          myChart.resize();
        })
      });
    },
    // 创建折线图
    getLineChart() {
      let right_lineData = this.shopData();
      right_lineData.then((res) => {
        this.rightlinedata = res.amount;
        const chart = this.$refs.rightlineChart;
        const myChart = this.$echarts.init(chart);
        const option = {
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              data: this.rightlinedata,
              type: "line",
            },
          ],
          tooltip: {
            trigger: "axis",
            axisPointer: {
              // 坐标轴虚线
              type: "cross",
              label: {
                backgroundColor: "#6a7985",
              },
            },
          },
        };
        option && myChart.setOption(option);
        window.addEventListener("resize", () => {
          myChart.resize();
        })
      });
    },
    orderData() {
      // 获取左侧图表数据
      //请求函数，这里使用同步请求，才能将后端返回的数据给echarts使用
      //第一个参数是状态变为成功后应该执行的回调函数，第二个参数是状态变为失败后应该执行的回调函数。
      return new Promise((resolve, reject) => {
        orderData(store.getters.sid)
          .then((res) => {
            resolve(res);
          })
          .catch((error) => {
            reject(error);
          });
      });
    },
    // 获取顶部当日卡片数据
    async todayData() {
      const res = await todayData(store.getters.sid);
      // console.log("顶部当日数据", res);
      this.todaydata = res;
    },
    // 获取店铺数据
    async shopData() {
      const result = await shopData(store.getters.sid);
      // console.log("店铺数据", result);
      return result;
    },
    //跳转到添加商品页
    addgoods() {
      this.$router.push("/goods");
      let status = this.$store.state.dialogVisible;
      this.$store.commit("changeStatus", !status);
      // 向商品页面传递数据
      // console.log(this);
      // this.$bus.$emit("dialog", this.showDialogVisible);
      // window.eventBus.$emit("dialog", this.showDialogVisible);

      // goodsmanagement.data.dialogVisible = true;
      // goodsmanagement.methods.addGood();
    },
    ordermanage() {
      this.$router.push("/order");
    },
    activemanage() {
      this.$router.push("/actives");
    },
  },
  watch: {},
  created() {
    // 预先调用的方法
    // this.orderData();
    this.todayData();
    // this.shopData();
  },
};
</script>

<style lang="scss" scoped>
.home-container {
  background-color: #e8ecf1;
}

// 我的主页自定义样式
::v-deep #tab-first.is-active {
  background-color: #daeafd;
  border-radius: 20px;
}

// 顶部数据样式
.todaydata {
  font-size: 30px;
  font-weight: bolder;
}

.left-data,
.right-bottom {
  margin-top: 15px;
}

.commonly-used {
  .el-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 15px 0 20px 0;

    .el-button {
      width: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 25px;
      height: 40px;
      border-radius: 8px;
      margin: 5px 0;
    }
  }

  .commonly-used1 {
    background-color: #7cbcfd;
  }

  .commonly-used2 {
    background-color: #edbd7c;
  }

  .commonly-used3 {
    background-color: #97d37a;
  }

  .commonly-used4 {
    background-color: #f6999a;
  }
}
</style>